<template>
	<div class="container">

		<el-dialog :visible.sync="checkFlag" width="1040px" class="jhdialog">
			<!-- 帮这个check  弹窗绑定  date 数据里面的公司名称  和  公司id  -->
			<!-- 应该是给这个 check  传了一个type  为0，tabnum为 4 ， 
		        companyName为 info对象里的companyname ，companyId为info对象里的companyId
		   -->
			<check v-if="checkFlag" :companyName="companynames" :companyId="companyids" :type="'0'" :tabNum="'4'">
			</check>
		</el-dialog>

		<!-- 主导航栏 -->
		<!-- <ul class="main-tabs clearfix">
			<li v-for="(item,index) in mainTabs.data" :key="index" :class="{active:index==mainTabs.index}"
				@click="mainTabSwitch(index)">{{item.title}}</li>
		</ul> -->

		<h3 class="header-title clearfix" v-show="mark">
			<span class="border"></span>
			<p>{{ headerTitle }}</p>
			<!-- <span class="addUser" @click="opneAddUser">创建岗位</span> -->
			<span class="addUser" @click="opneAddCompany">+创建企业</span>
		</h3>

		<h3 class="header-title clearfix" v-show="!mark">
			<!-- <span class="border"></span> -->
			<el-breadcrumb style="float: left; cursor: pointer;">
				<el-breadcrumb-item :to="{ path: '/home/entering' }"
					style=" font-weight: bold; font-size: 18px; cursor: pointer;"><i class="el-icon-arrow-left"
						style="font-size: 18px; cursor: pointer;">返回</i></el-breadcrumb-item>
			</el-breadcrumb>
			<p style="color: rgb(0, 100, 228);">({{ personname }})</p>
			<!-- <span class="addUser" @click="opneAddUser">创建岗位</span> -->
			<span class="addUser" @click="opneAddCompany">+创建企业</span>
		</h3>
		<comNavTabs :navList="navList" @switch="tabSwitch" v-show="!mark"></comNavTabs>
		<!-- <comSearch   :options="searchData" @search="searchList"></comSearch> -->
		<el-form :model="form" :inline="true">

			<el-form-item label="企业名称" v-show="mark">
				<el-input v-model="form.userName" placeholder="请输入企业名称"></el-input>
			</el-form-item>

			<el-form-item label="企业所在地区" prop="area" v-show="!mark">
				<el-cascader v-model="form.area" placeholder="请输入/选择地区" :options="citylist" @change="handleChange"
					:show-all-levels="true" filterable style="width: 260px;" expandTrigger="hover"></el-cascader>
			</el-form-item>

			<!-- <el-form-item label="手机号码">
				<el-input v-model="form.telnum" placeholder="请输入充值人名称"></el-input>
			</el-form-item> -->


			<el-form-item label="日期" v-show="mark">
				<el-date-picker v-model="form.startDate" type="date" placeholder="选择日期" format="yyyy-MM-dd"
					value-format="yyyy-MM-dd"></el-date-picker>~
				<el-date-picker v-model="form.endDate" type="date" placeholder="选择日期" format="yyyy-MM-dd"
					value-format="yyyy-MM-dd"></el-date-picker>
			</el-form-item>


			<el-form-item label="日期" v-show="!mark">
				<el-date-picker v-model="form.startDate" type="date" placeholder="选择日期" format="yyyy-MM-dd"
					value-format="yyyy-MM-dd"></el-date-picker>~
				<el-date-picker v-model="form.endDate" type="date" placeholder="选择日期" format="yyyy-MM-dd"
					value-format="yyyy-MM-dd"></el-date-picker>
			</el-form-item>


			<el-form-item style="width:400px;text-align:center;">
				<el-button type="primary" @click="search" size="small" class="searchBtn">查询</el-button>
				<el-button type="primary" @click="exportJobData" size="small" class="searchBtn export">导出</el-button>
			</el-form-item>
		</el-form>

		<!-- <comTable :options="tableList"
		
		@linkpositon="function(data){linkpositon(data)}"
		@editecompany="function(data){editecompany(data)}"
		
		></comTable>
 -->




		<div class="table-box table" <el-table class="memberList-table" :data="tableListdata" v-show="navList.index == 0"
			:cell-style="tableRowStyle">cell-class-name="member-cell"
			header-cell-class-name="member-header" :header-cell-style="{ background: '#cae5fa',color: '#727272' }"
			border stripe style="width: 100%" size="small">
			<el-table-column prop="nickname" label="企业名称" align="center">
				<template slot-scope="scope">
					<span @click="editecompany(scope.row)" style="color: #6b97eb;cursor: pointer;">{{ scope.row.companyname
					}}</span>
				</template>
			</el-table-column>
			<el-table-column prop="address" label="所在地区" align="center">
			</el-table-column>
			<el-table-column prop="companytype" label="公司性质" align="center">
			</el-table-column>
			<el-table-column prop="companysize" label="企业规模" align="center">
			</el-table-column>
			<el-table-column prop="insertdate" label="注册时间" align="center">
			</el-table-column>
			<el-table-column prop="positioncountall" label="发布岗位数量" align="center">
			</el-table-column>
			<el-table-column prop="companystatus" label="状态" align="center">
				<template slot-scope="scope">
					<span :style="{ color: getColorBycol(scope.row) }">{{ scope.row.companystatus }}</span>
				</template>
			</el-table-column>

			<el-table-column prop=" realname" label="操作" align="center" v-if="mark">
				<template slot-scope="scope">
					<span v-show="caozuo" style="color: #6b97eb;cursor: pointer; " @click="linkpositon(scope.row)">{{
						scope.row.caozuoname }}</span>
				</template>
			</el-table-column>
			</el-table>

			<el-dialog :visible.sync="showremindDialog" width="660px" height="309px" class="evalDialog">
				<div class="remindbox">
					<h2 class="title">
						提示
					</h2>
					<div class="content">
						<el-input type="textarea" :autosize="{ minRows: 3.4, maxRows: 6 }" placeholder="请输入下架原因"
							v-model="remindcotent">
						</el-input>
						<div class="footer">
							<el-button style="margin-left: 172px;" @click="cancel">取消</el-button>
							<el-button type="primary" @click="subdown">确认</el-button>
						</div>
					</div>

				</div>

			</el-dialog>

			<div class="pageBox" v-show="navList.index == 0">
				<el-pagination @size-change="handleSizeChange" @current-change="pageChange" :current-page.sync="cur"
					:page-sizes="[10, 20, 30, 50, 100]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
					:total="totalNum" background></el-pagination>
			</div>


			<div class="table-box table" <el-table class="memberList-table" :data="tableListdata" v-show="navList.index == 1"
				:cell-style="tableRowStyle">cell-class-name="member-cell"
				header-cell-class-name="member-header" :header-cell-style="{ background: '#cae5fa',color: '#727272' }"
				border stripe style="width: 100%" size="small">
				<el-table-column prop="companyname" label="企业名称" align="center">
				</el-table-column>
				<el-table-column prop="positionname" label="岗位名称" align="center">
				</el-table-column>
				<el-table-column prop="maxwage" label="薪资待遇" align="center">
				</el-table-column>
				<el-table-column prop="city" label="所在地区" align="center">
				</el-table-column>
				<el-table-column prop="address" label="工作地址" align="center">
				</el-table-column>
				<el-table-column prop="insertdate" label="发布日期" align="center">
				</el-table-column>
				<el-table-column prop="status" label="状态" align="center">
					<template slot-scope="scope">
						<span :style="{ color: getColorBycol(scope.row) }">{{ scope.row.status }}</span>
					</template>
				</el-table-column>
				<el-table-column prop="status" label="操作" align="center">
					<template slot-scope="scope">
						<span style="color: rgb(107, 151, 235);
    cursor: pointer;" @click="down(scope.row)">{{ scope.row.status === '上架中' ? '下架' : '-' }}</span>
					</template>
				</el-table-column>

				</el-table>
				<div class="pageBox" v-show="navList.index == 1">
					<el-pagination @size-change="handleSizeChange" @current-change="pageChange1" :current-page.sync="cur1"
						:page-sizes="[10, 20, 30, 50, 100]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
						:total="totalNum1" background></el-pagination>
				</div>
			</div>



		</div>





	</div>
</template>

<script>
import check from "../socical/socialCheck/check.vue";
export default {
	components: {
		check,
		// check: () => import("socialCheck/check.vue"),
		comNavTabs: () => import("@/household/common/comNavTabs.vue"),
		comSearch: () => import("@/component/common/comSearch.vue"),
		// 	comImport: () => import("@/component/common/comImport.vue"),
		comTable: () => import("@/household/common/comTable.vue"),
		// 	flexDemand: () => import("@/component/flexible/flexDemand.vue"),
		// 	flexManualEntry: () => import("@/component/flexible/flexManualEntry.vue"),
		// 	flexRegisterMsg: () => import("@/component/flexible/flexRegisterMsg.vue"),
		// 	flexUnsuccessful: () => import("@/component/flexible/flexUnsuccessful.vue"),
		// 	flexUpload: () => import("@/component/flexible/flexUpload.vue"),
		// 	flexCollectAccount: () => import("@/component/flexible/flexCollectAccount.vue"),
		// 	flexImportTemplate: () => import("@/component/flexible/flexImportTemplate.vue"),
	},
	data() {
		return {
			positionData: {},
			showremindDialog: false,
			remindcotent: '',
			companynames: '',
			companyids: '',
			checkFlag: false,
			pageSize: 10,
			totalNum: 0,
			totalNum1: 0,
			cur: 0,
			cur1: 0,
			personname: '',
			mark: true,
			caozuo: true,
			tableListdata: [],
			showDialog: false,
			userid: '',
			headerusername: '',
			headerTitle: '企业录入',
			city: '',
			province: '',
			areas: '',
			navList: {
				index: 0, //当前是在哪个tab栏
				data: [{
					title: '使用中'
				},
				{
					title: '已注销'
				},
				]
			},
			tableList: {
				list: [{
					title: '企业姓名',
					prop: 'companyName',
					isClick: false
				},
				{
					title: '所在地区',
					prop: 'area',
					isClick: false
				},
				{
					title: '公司性质',
					prop: 'createTime',
					isClick: false
				},
				{
					title: '企业规模',
					prop: 'projectName',
					isClick: false
				},
				{
					title: '注册时间',
					prop: 'costStandard',
					isClick: false
				},
				{
					title: '发布岗位数量	',
					prop: 'costStandard',
					isClick: false
				},
				{
					title: '状态',
					prop: 'costStandard',
					isClick: false
				},
				],
				noOperation: true, //是否有操作项
				operation: [ //操作项内容
					{
						name: '操作',
						isBtn: false,
						title: 'openFlexDialog'
					}
				],
				data: [
					/* {
						companyName: '上海天都人力资源有限公司',
						telnum: '15202120781',
						createTime: '2020-10-12',
						projectName: '帮助公司设计官方网站',
						costStandard: '5000元',
					} */
				]
			},
			searchData: {
				noFounder: true, //姓名
				noTime: true, //时间段
				phonenum: true, //手机号码
				searchInfo: {}, //搜索信息
			},
			navList: {
				index: 0, //当前是在哪个tab栏
				data: [{
					title: '企业注册信息'
				},
				{
					title: '岗位发布信息'
				},
				]
			},

			form: {
				userName: '', //用户姓名
				telnum: '', //电话
				startDate: '', //开始时间
				endDate: '', //截至时间
				area: '',
			},
			citylist: [],
			positionList: [],
			companysizeList: [],
			companytypeList: [],
			options: [],
		}
	},

	created() {
		console.log(this.$route.query.id);
		if (this.$route.query.id != undefined) {
			this.personname = this.$route.query.userName
			this.userid = this.$route.query.id
			this.mark = false
		} else {
			this.userid = localStorage.getItem('userid')
			this.mark = true
			console.log(this.mark, 'mark');
		}

		this.tabSwitch(0);
		this.getWorkers();
	},
	methods: {

		exportJobData() {
			let data = {
				inputuserid: this.userid,
				searchkey: this.form.userName,
				startdate: this.form.startDate,
				enddate: this.form.endDate,
				pageSize: this.pageSize,
				pageNum: this.cur,
				province: this.province,
				city: this.city,
				area: this.areas,
				positionname: '',

			}
			this.$ceshiAxiosExportPost('v1/position/ExportJobData', data).then(res => {
				var blob = new Blob([res.data]);
				var downloadElement = document.createElement("a");
				var href = window.URL.createObjectURL(blob); //创建下载的链接
				downloadElement.href = href;


				downloadElement.download = `数据列表.xls`;

				document.body.appendChild(downloadElement);
				downloadElement.click(); //点击下载
				this.$message({
					type: "success",
					message: "下载成功！",
				});
				document.body.removeChild(downloadElement); //下载完成移除元素
				window.URL.revokeObjectURL(href); //释放掉blob对象
			}).catch(error => {
				this.$message({
					message: "导出失败",
					type: "error"
				});
			});
		},

		subdown() {
			if (this.remindcotent == '') {
				return this.$message.warning('请输入下架原因');
			}
			let params = {
				positionid: this.positionData.positionid,
				restoremoney: 0,
				restoreintegral: 0,
				remark: this.remindcotent
			}

			this.$ceshiAxios.post('v1/platform/company/cancelposition', params).then(res => {
				console.log(res);
				if (res.data.code == 1) {
					this.$message.success('下架成功')
					this.cancel();
					this.tabSwitch(1);
				} else {
					this.$message.warning(res.data.message)
				}
			})


		},
		cancel() {
			this.showremindDialog = false
		},




		down(data) {
			if (data.status == "平台下架") {
				return this.$message.warning('当前岗位已经下架！！')
			}
			this.showremindDialog = true
			this.positionData = data
			console.log(data);
		},
		handleChange() {
			if (this.form.area[0] == 0) {
				this.province = "";
				this.city = "";
				this.areas = "";
			} else {
				this.province = this.form.area[0]
				this.city = this.form.area[1]
				this.areas = this.form.area[2]

			}
		},

		pageChange(p) {
			// 点击的时候传过来一个参数，这个参数就是所点击的当前页数，
			// 然后把这个当前页数转换成字符串形式赋值给page，
			// 然后把page这个参数传给search这个方法
			this.cur = p;
			this.tabSwitch(this.navList.index)
		},
		pageChange1(p) {
			// 点击的时候传过来一个参数，这个参数就是所点击的当前页数，
			// 然后把这个当前页数转换成字符串形式赋值给page，
			// 然后把page这个参数传给search这个方法
			this.cur1 = p;
			this.tabSwitch(this.navList.index)
		},


		handleSizeChange(val) {
			console.log(val);
			this.pageSize = val;
			this.tabSwitch(this.navList.index)
		},
		tableRowStyle({
			row,
			rowIndex
		}) {
			return 'font-size:15px;'
		},
		getColorBycol(scope) {
			console.log(scope);
			if (scope.companystatus == '审核通过') {
				return "rgb(32, 180, 63)"
			} else if (scope.companystatus == '待审核') {
				return "rgb(251, 198, 105)"
			} else if (scope.companystatus == '审核未通过') {
				return "rgb(255, 213, 190)"
			}

			if (scope.status == '上架中') {
				return "rgb(32, 180, 63)"
			} else if (scope.status == '企业下架') {
				return "rgb(244, 186, 186)"
			} else if (scope.status == '平台下架') {
				return "rgb(255, 213, 190)"
			} else if (scope.status == '个人下架删除') {
				return "red"
			}


		},
		editecompany(row) {
			console.log(row);
			if (!this.mark) {
				this.checkFlag = true
				this.companyids = row.companyid
				this.companynames = row.companyname
			} else {
				console.log(row, '编辑');
				if (row.companystatus == '下线') {
					this.$message.warning('当前企业已经下线！')
					return
				}
				console.log(row);
				this.$router.push({
					path: "/home/enteringaddcompany",
					query: {
						checkadd: true,
						companyname: row.companyname,
						logo: row.logo,
						companysize: row.companysize,
						companytype: row.companytype,
						area: row.area,
						city: row.city,
						industry: row.industry,
						industrytypename: row.industrytypename,
						introducation: row.introducation,
						address: row.address,
						companyid: row.companyid,
					}
				})
			}
		},
		linkpositon(data) {
			console.log(data);
			if (data.caozuoname == '-') {
				return
			}

			// /home/pgentering
			this.linkTo("/home/pgindexassistant", {
				id: data.companyid,
				companyname: data.companyname
			});
		},
		getWorkers() {
			// let workers = require('../../assets/mask/positionList.json');
			let base = require('../../assets/mask/baseGeneral.json');
			let indutry = require('../../assets/mask/select_industry.json');
			let city = require('../../assets/mask/city1.json');
			this.citylist = city.city
			this.options = city.city
			this.positionList = indutry.tradeList
			this.companysizeList = base.companyRange
			this.companytypeList = base.companyType
		},
		search() {
			this.tabSwitch(this.navList.index)
		},
		opneAddUser() {
			this.linkTo("/home/enteringaddposition", {
				id: 1,
				positionname: 1
			});
		},
		opneAddCompany() {
			this.linkTo("/home/enteringaddcompany", {
				id: 1,
				positionname: 1
			});
		},
		tabSwitch(index) {
			this.navList.index = index;
			if (this.navList.index == 0) {
				this.tableList.list = [{
					title: '企业名称',
					prop: 'companyname',
					isClick: true,
					eventName: 'editecompany'
				},
				{
					title: '所在地区',
					prop: 'area',
					isClick: false
				},
				{
					title: '公司性质',
					prop: 'companytype',
					isClick: false
				},
				{
					title: '企业规模',
					prop: 'companysize',
					isClick: false
				},
				{
					title: '注册时间',
					prop: 'insertdate',
					isClick: false
				},
				{
					title: '发布岗位数量	',
					prop: 'positioncountall',
					isClick: false
				},
				{
					title: '状态',
					prop: 'companystatus',
					isClick: false
				},
				]
				this.tableList.operation = [ //操作项内容
					{
						name: '岗位管理',
						isBtn: false,
						title: 'linkpositon'
					}
				]

				if (!this.mark) {
					this.tableList.noOperation = false
				}


				let params = {
					// inputuserid:localStorage.getItem('userid')
					inputuserid: this.userid,
					searchkey: this.form.userName,
					startdate: this.form.startDate,
					enddate: this.form.endDate,
					pageSize: this.pageSize,
					pageNum: this.cur,
					province: this.province,
					city: this.city,
					area: this.areas,
					startdate: this.form.startDate,
					enddate: this.form.endDate

				}
				console.log(params.inputuserid, 'inputuserid');
				this.$ceshiAxios.post('v1/company/companyById', params).then(res => {
					console.log(res);
					this.totalNum = Math.abs(res.data.data.total)
					for (var i in res.data.data.plist) {
						if (res.data.data.plist[i].companystatus == 0) {
							res.data.data.plist[i].companystatus = '待审核'
							res.data.data.plist[i].caozuoname = "-"
						} else if (res.data.data.plist[i].companystatus == 1) {
							res.data.data.plist[i].companystatus = '审核通过'
							res.data.data.plist[i].caozuoname = "岗位管理"
						} else if (res.data.data.plist[i].companystatus == 2) {
							res.data.data.plist[i].companystatus = '审核不通过'
							res.data.data.plist[i].caozuoname = "-"
						} else if (res.data.data.plist[i].companystatus == 3) {
							res.data.data.plist[i].companystatus = '下线'
							res.data.data.plist[i].caozuoname = "-"
						}
						for (var k in this.companysizeList) {
							if (res.data.data.plist[i].companysize == this.companysizeList[k].code) {
								res.data.data.plist[i].companysize = this.companysizeList[k].name
							}
						}
					}



					for (var i in res.data.data.plist) {
						for (var k in this.companytypeList) {
							if (res.data.data.plist[i].companytype == this.companytypeList[k].code) {
								res.data.data.plist[i].companytype = this.companytypeList[k].name
							}
						}
					}

					for (var i in this.options) {
						for (var c in res.data.data.plist) {
							for (var k in this.options[i].children) {
								if (res.data.data.plist[c].city == this.options[i].children[k].value) {
									res.data.data.plist[c].city = this.options[i].children[k].label
								}
								for (var z in this.options[i].children[k].children) {
									if (res.data.data.plist[c].area == this.options[i].children[k].children[z]
										.value) {
										res.data.data.plist[c].area = this.options[i].children[k].label + this
											.options[i].children[k].children[z].label
									}
								}

							}
						}
					}
					this.tableListdata = res.data.data.plist
					console.log('22221');

				})
			} else if (this.navList.index == 1) {

				let params = {
					inputuserid: this.userid,
					positionname: this.form.userName,
					pageSize: this.pageSize,
					pageNum: this.cur1,
					province: this.province,
					city: this.city,
					area: this.areas,
					startdate: this.form.startDate,
					enddate: this.form.endDate


				}
				this.$ceshiAxios.post('/v1/position/inputStationmessage', params).then(res => {
					this.tableListdata = res.data.data.plist
					console.log(this.tableListdata);
					this.totalNum1 = Math.abs(res.data.data.total)
					let list = res.data.data.plist
					for (var i in list) {
						if (list[i].maxwage != '' && list[i].minwage != '') {
							list[i].maxwage = list[i].miniwage / 1000 + 'k-' + list[i].maxwage / 1000 + 'k'
						}
						if (list[i].status == 0) {
							list[i].status = '企业下架'
						} else if (list[i].status == 1) {
							list[i].status = '上架中'
							list[i].look = '查看'
						} else if (list[i].status == 2) {
							list[i].status = '平台下架'
						} else if (list[i].status == 3) {
							list[i].status = '个人下架删除'
						}
					}
				})
			}
		},
		searchList(form) {
			if (form.userName) {
				form.businessmanName = form.userName;
				delete form.userName;
			}
			console.log(form);
			this.searchData.searchInfo = form;
			this.getDataList(this.searchData.searchInfo);
		},
	},

}
</script>

<style scoped="scoped">
.content {
	width: 520px;
	height: 150px;
	margin: 20px auto;
}

.footer {
	margin-top: 20px;
	margin-bottom: 20px;

}

.pageBox {
	margin-top: 20px;
}

.table {
	width: 100%;
	margin-top: 20px;
}

.search {
	margin: 20px 0;
}

.el-form-item {
	min-width: 300px;
	float: left;
	margin-right: 20px;
}

.el-form {
	margin-top: 20px;
}

.searchBtn {
	width: 140px;
}

.searchBox {
	padding: 0 30px;
}
	
.export {
	background-color: white;
	color: rgb(39, 101, 231);
	border: 1px solid rgb(39, 101, 231);
}

.container {
	background-color: #fff;
	height: 100%;
	padding-left: 20px;
}

.main-tabs {
	background-color: #EFF1F8;
	margin-bottom: 20px;
	margin-left: -20px;
	padding-left: 50px;
}

.main-tabs li {
	height: 40px;
	line-height: 40px;
	float: left;
	margin: 10px 20px;
	padding: 0 30px;
	cursor: pointer;
}

.main-tabs .active {
	background: #0064E4;
	border-radius: 20px;
	color: #fff;
}

.addUser {
	cursor: pointer;
}

.dialogForm {
	margin: 0 auto;
	width: 600px;
	height: 300px;
	padding-left: 58px;

}

.remend {
	margin-left: 100px;
	color: red;

}

.dialogForm h2 {
	margin: 23px 167px;
	padding-top: 20px;
}

.dialogForms {
	width: 600px;
	margin: 0 auto;
	height: 400px;
}

.header-title {
	margin-top: 20px;
	padding: 0 0 20px 0;
	border-bottom: 1px solid #D2D2D2;
}

.header-title .border {
	width: 15px;
	height: 30px;
	background-color: #0064E4;
	margin-right: 20px;
	float: left;
}

.header-title p {
	float: left;
	font-weight: bold;
	line-height: 30px;
}

.header-title span {
	display: inline-block;
	float: right;
	font-weight: bold;
	color: #0000FF;
	line-height: 30px;
	margin-right: 20px;
}

.header-title .opt span {
	float: left;
	margin-right: 20px;
	padding: 10px 20px;
	border: 1px solid #000;
	border-radius: 20px;
	cursor: pointer;
}

.pageBox {
	margin-top: 20px;
}
</style>
